<template>
	<view class="content">
		<text class="top-tle">精品鞋服</text>
		<banner :focusList="focusList"></banner>
		<text class="main-tle">{{itemListItem.name}}</text>
		<view class="price">￥{{itemListItem.counterPrice}}</view>
		<ul class="ul-box">
			<li>1.100%蚕丝填充</li>
			<li>2.超低价格，最好质量</li>
			<li>3.包邮到家，七天无理由退换货</li>
		</ul>
		<view class="btm">
			<i class="iconfont icon-kefu i-box"></i>
			<a href="#" class="buy">立即购买</a>
			<a href="#" class="cart">加入购物车</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemListItem: {},
				focusList: []
			};
		},
		onLoad(option) {
			this.focusList = []
			if (option.itemList) {
				this.itemListItem = JSON.parse(option.itemList).find(ele => ele.id == option.id)
				localStorage.setItem('itemListItem', JSON.stringify(this.itemListItem))
			} else {
				this.itemListItem = JSON.parse(localStorage.getItem('itemListItem'))
			}
			this.focusList.push({
				picUrl: this.itemListItem.listPicUrl
			}) // 强行塞到数组中给公共的轮播图组件
		},
		destroyed() {
			// 页面关闭时，消除本地存储的数据
			localStorage.removeItem('itemListItem');
		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;
		position: relative;
		padding-top: 76rpx;
		background-color: #fff;

		.top-tle {
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 36rpx;
			font-weight: bold;
			position: fixed;
			top: 86rpx;
			left: 0;
			z-index: 999;
		}

		.main-tle {
			position: relative;
			left: 50%;
			transform: translate(-50%);
			display: inline-block;
			width: 88%;
			height: 80rpx;
			background-color: pink;
			margin: 20rpx 0;
			text-align: center;
			line-height: 80rpx;
			border-radius: 20rpx;
		}
		.price{
			font-size: 36rpx;
			font-weight: bold;
			color: #ff0000;
			padding-left: 20rpx;
		}

		.ul-box {
			height: 1600rpx;
			padding: 30rpx;
			li{
				margin: 100rpx;
			}
		}

		.btm {
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			display: flex;
			align-items: center;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #eee;

			.i-box {
				width: 20%;
				height: 100%;
				font-size: 36rpx;
				border-right: 2rpx solid #ccc;
			}

			.buy {
				width: 33%;
				height: 100%;
				color: #000;
			}

			.cart {
				flex: 1;
				height: 100%;
				background-color: #ff0000;
				border-left: 2rpx solid #ccc;
				color: #fff;
			}
		}
	}
</style>